<template>
  <div class="footer">
    <h1>我是Footer</h1>
    <p>Count的值是{{ number }}</p>
    <button @click="add">累加</button>
    <button @click="addN({ n: 10 })">累加n</button>

    <button @click="increamentWait">2秒累加</button>
    <button @click="increamentNWait({ n: 100 })">2秒累加n</button>

    <h3>电影长度是{{movieList.length}}</h3>
    <h2>电影列表 <button @click="getMovieList">获取</button></h2>
    <ul>
      <li v-for="item in movieList" :key="item.tvId">{{ item.albumName }}</li>
    </ul> 
    
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
export default {
  name: "Footer",


  //1.计算属性拿store中的数据 渲染到页面
  computed:{
    //映射 
    //1.数组写法 计算属性名字和state中数据的名字一致
    // ...mapState(["count"])

    //2.对象写法 计算属性名字和state中数据的名字不一致
    ...mapState({number:"count" , movieList:"movieList"})
  },


  //2.通过调用函数修改store中的数据 重新渲染页面 修改store数据的唯一方式就是commit(提交mutation)
  methods:{
    //映射 
    //1.数组写法 事件函数名字和mutations中函数的名字一致
    //  ...mapMutations(["increament" , "decreament"])

    //2.对象写法 事件函数名字和mutations中函数的名字不一致
    ...mapMutations({add: "increament" , addN: "decreament"}),

    ...mapActions(["increamentWait" , "increamentNWait"]),
    

    /* add(){
      this.$store.commit("increament")
    },

    addN(n){
      this.$store.commit("decreament" , n)
    }, */


    /* //等2秒累加 异步的修改数据不能直接用commit 要dispatch到actions中 让actions去commit
    increamentWait(){
      this.$store.dispatch("increamentWait")
    },

    //等2秒累加n
    increamentNWait(n){
      this.$store.dispatch("increamentNWait" , n)
    }, */


    //发送请求获取电影列表 dispatch
    getMovieList(){
      this.$store.dispatch("getmovieList")
    }

  }

};
</script>

<style scoped>
.footer {
  margin: 30px;
  background: deepskyblue;
  text-align: center;
}
</style>